/*
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    width: 100%;
    height: 90px;
    font-size: 40px;
    background-color: #0225ff;
    text-color: black;
    text-align: left;
    padding-left: 20px;
}

.list-wrapper {
    width: 100%;
    divider-color: gray;
    divider-height: 10px;
    display: flex;
}

.list-item {
    width: 100%;
    flex-direction: row;
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    align-items: flex-start;
    height: 145px;
}

.list-item-child {
    width: 100%;
    flex-direction: row;
    margin-left: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    align-items: flex-start;
    height: 145px;
}

.list-left {
    width: 20%;
    radius: 10px;
}

.list-img {
    margin: 20px;
    width: 100%;
    height: 130px;
}


.list-right {
    width: 70%;
    flex-direction: column;
    display: flex;
    margin-left: 10px;
}

.list-model {
    width: 100%;
    height: 50px;
    font-size: 45px;
    text-color: royalblue;
    margin-top: 5px;
}

.list-type {
    width: 100%;
    height: 35px;
    font-size: 25px;
    text-color: red;
}

.list-info {
    width: 100%;
    height: 40px;
    font-size: 35px;
}

.item-group-child {
    justify-content: center;
    width: 100%;
}

@media screen and (min-aspect-ratio: 0.8) {
    .title {
        width: 100%;
        height: 45px;
        font-size: 20px;
        background-color: #0225ff;
        text-color: black;
        text-align: left;
        padding-left: 10px;
    }

    .list-item {
        width: 100%;
        flex-direction: row;
        margin-left: 25px;
        margin-top: 5px;
        margin-bottom: 5px;
        align-items: flex-start;
        height: 85px;
    }

    .list-img {
        margin: 10px;
        width: 60px;
        height: 85px;
    }

    .list-item-child {
        width: 100%;
        flex-direction: row;
        margin-left: 25px;
        margin-top: 5px;
        margin-bottom: 5px;
        align-items: flex-start;
        height: 85px;
    }

    .list-model {
        width: 100%;
        height: 40px;
        font-size: 25fp;
        text-color: royalblue;
        margin-top: 5px;
    }

    .list-type {
        width: 100%;
        height: 35px;
        font-size: 20fp;
        text-color: red;
    }

    .list-info {
        width: 100%;
        height: 40px;
        font-size: 20fp;
    }
}
